import React, { Component, Suspense } from 'react'
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Table, Form, Spin, Modal, Button, message, Tooltip } from 'antd';
import { routerRedux } from 'dva/router';
import styles from "./index.less";
import pen from '@/assets/icons/bi.png'
import deleteimg from '@/assets/buttonimg/delete.png'
const FormItem = Form.Item;

@connect(({ process, loading }) => ({
  process,
  loading: loading.effects['antistopReply/fetch'],
}))

class AntistopReply extends Component {
  state = {
    total: 0,
    dataSource: [],
    pageSize: 10,
    page: 1
  };

  // eslint-disable-next-line react/sort-comp
  fetch = (page, limit) => {
    this.setState({
      login: true
    })
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'antistopReply/fetch',
        payload: { page, limit, robotId: currentUser.robotId },
        callback: res => {
          console.log('列表数据', res);
          let temp = res.list
          temp.map((item, index) => item['key'] = index)
          this.setState({
            dataSource: temp,
            total: res.total,
            login: false
          })
        },
      });
    });
  }

  componentDidMount() {
    this.fetch()
  }

  handleDelete = (item) => {
    console.log('item', item)
    const { dispatch } = this.props;
    if (item.answer.slice(0, 3) === '<p>') {
      dispatch(routerRedux.push({
        pathname: '/knowledge/antistopReply/Ueditor',
        params: { id: item }
      }));
    } else {
      dispatch(routerRedux.push({
        pathname: '/knowledge/antistopReply/edit',
        params: { id: item }
      }));
    }
  }

  onChangeA = (val) => { // 页数选择
    console.log(val)
    this.setState({ page: val }, () => {
      this.fetch(val, this.state.pageSize)
    })
  }

  // 每页显示多少条数据
  onShowSizeChangeA = (current, pageSize) => {
    console.log('1', current, '2', pageSize);
    this.setState({ pageSize: pageSize, page: current }, () => {
      this.fetch(current, pageSize)
    })
  }

  render() {
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <div className={styles.backgroundp}>
            <Row className={styles.colorBackground}>
              <Col style={{ padding: 10,color: '#4B5475', fontWeight: 600  }} xs={24}>
                <div className={styles.title}>
                  <span>关键词回复{`(${this.state.total})`}</span>
                  <span style={{ marginLeft: 2,paddingTop:2 }}>
                  <Tooltip
                    placement="top"
                    title="该功能是结合词典功能设计的，每个机器人可单独建设专属的关键词/敏感词库，自由设置每个关键词/敏感词库的回复话术。
                    关键词/敏感词的优先级高于机器人，也就是说如果用户问句触发了关键词/敏感词，系统直接回复设置好的相应答案，不经过机器人的语义分析。"
                    arrowPointAtCenter
                  >
                    <Icon type="info-circle" />
                  </Tooltip>
                </span>
                </div>
              </Col>
            </Row>
            <Card
              bordered={false}
            >
              <div className={styles.fromColumn}>
                <div className='zdyButtonA'> 
                  <Button onClick={this.enumeration} type='primary' icon="plus"><FormattedMessage id="app.antistopReply.addAntistopRevert" defaultMessage="add" /></Button>
                </div>
              </div>
              {this.lessdata()}
            </Card>
          </div>
        </PageHeaderWrapper>
      </Suspense>
    );
  }

  enumeration = () => { // '/knowledge/antistopReply/edit'
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/knowledge/antistopReply/add',
      params: { id: 'tcx' }
    }));
  }

  handleDeletes = (item) => {
    console.log('item', item)
    Modal['confirm']({
      title: '删除任务',
      content: '确定删除吗？',
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        const { dispatch, currentUser } = this.props;
        this.reqRef = requestAnimationFrame(() => {
          dispatch({
            type: 'antistopReply/fetchd',
            payload: { answerId: item._id },
            callback: res => {
              console.log('componentWillMount', res);
              if (res.status === true) {
                message['success'](`${res.msg}`)
                this.fetch()
              }
            },
          });
        });
      },
      onCancel() {
        console.log('onCancel')
      }
    })
  }

  lessdata = () => {
    const columns = [
      {
        title: '',
        width: 'calc(5vw)',
        dataIndex: ''
      },
      {
        title: '实体名称',
        width: 'calc(60vw)',
        dataIndex: 'dictName'
      },

      {
        title: '操作',
        width: 'calc(20vw)',
        render: (text, item) => {
          return <div className={styles.pb}>
            <div
              className={styles.buttongl}
              onClick={(text) => { this.handleDelete(item) }}>
              <img style={{ marginRight: 5 }} src={pen} />
              <span style={{ marginBottom: 1 }}><FormattedMessage id="app.customDictionary.edit" defaultMessage="Edit" /></span>
            </div>
            <div
              style={{ marginLeft: 10, background: '#e8313b' }}
              className={styles.buttongl}
              onClick={(text) => { this.handleDeletes(item) }}>
              <img src={deleteimg} style={{ marginRight: 5 }} />
              <span style={{ marginBottom: 1 }}> <FormattedMessage id="app.customDictionary.out" defaultMessage="out" /></span>
            </div>
          </div>
        }
      }
    ]
    return ( //主页
      <div  className='tableyc'>
        <Spin spinning={this.state.login}>
        <Table
        //  className='zdyTable'
          columns={columns}
          dataSource={this.state.dataSource}//数据
          onChange={this.handleChange}
          pagination={{  // 分页
            total: this.state.total,
            pageSize: this.state.pageSize,  // 显示几条一页
            current: this.state.page, // 当前页
            showSizeChanger: true,  // 是否显示可以设置几条一页的选项
            showQuickJumper: true,
            onChange: this.onChangeA,
            onShowSizeChange: this.onShowSizeChangeA
          }}
        />
      </Spin>
      </div> 
    )
  }
}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(AntistopReply));